<template>
  <div class="first-level-label">
    <el-table
      :data="labelList"
      size="mini"
      border>
      <el-table-column
        :label="$t('config.channel.labelName')"
        class="label-name">
        <template scope="scope">
          <span class="lab-name" v-if="!scope.row.status">{{ scope.row.name }}</span>
          <span v-if="scope.row.status" :class = "{is_error: addBorderFlag==true}">
            <el-input v-model.trim="scope.row.name"
                      class="label-input" :maxlength="10"></el-input>
            <div class="save-button">
              <span @click.stop="handleChannel(scope.$index, scope.row)" class="padding-r-10 cursor">{{$t('public.cancel')}}</span>
              <span @click.stop="handleSave(scope.$index, scope.row)" class="cursor">{{$t('public.save')}}</span></div>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('config.channel.status')">
        <template scope="scope">
          <p><span v-show="scope.row.enable === true">{{$t('config.channel.enabled')}}</span><span v-show="scope.row.enable === false" :class = "{is_stop: scope.row.enable==false}">{{$t('config.channel.disabled')}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('public.operate')">
        <template scope="scope">
          <div v-show="scope.row.name && scope.row._id" class="operate-btn">
            <span @click.stop="handleEdit(scope.$index, scope.row)" class="padding-r-10 cursor">{{$t('public.edit')}}</span>
            <span @click.stop="handleDisabled(scope.$index, scope.row)">
              <span v-show="scope.row.enable === false" class="cursor">{{$t('config.channel.enabled')}}</span>
              <span v-show="scope.row.enable === true" class="cursor" :class = "{is_stopBtn: scope.row.enable==true}" >{{$t('config.channel.disabled')}}</span>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'treeTable',
    data () {
      return {
        labelList: [],
        stopAddFlag: false,
        addBorderFlag: false
      }
    },
    props: ['tableData'],
    methods: {
      searchLabelName (searchLabelName) {
        console.log(this.tableData)
        let _data = deepClone(this.tableData)
        this.labelList = _data.filter((item) => {
          if (item.name.indexOf(searchLabelName) !== -1) {
            return item
          }
        })
        this.stopAddFlag = false
      },
      handleSave (index, row) {
        if (row.name) {
          this.$store.dispatch('saveServiceQualityLabel', {_id: row._id, name: row.name, operation: row.enable}).then((resp) => {
            if (resp && resp.success) {
              this.$emit('refreshData')
              this.$message.success(resp.message)
            } else {
              this.addBorderFlag = true
              this.$message.error(resp.message)
            }
          })
        } else {
          this.addBorderFlag = true
          this.$message.error(this.$t('channelsettings.callLabel8'))
          return
        }
      },
//      添加标签
      handleAddOneLabel () {
        if (this.stopAddFlag) {
          this.addBorderFlag = true
          return
        }
        this.stopAddFlag = true
        let obj = {
          name: '',
          status: true,
          operation: '',
          _id: null,
          stopSave: false
        }
        this.labelList.push(obj)
      },
//      取消操作
      handleChannel (index, row) {
        console.log(row)
        console.log(index)
        if (row.name === '' && row.id) {
          this.$message.error(this.$t('channelsettings.callLabel9'))
          return
        }
        this.stopAddFlag = false
        this.addBorderFlag = false
        if (row._id) {
          row.status = false
          let _data = deepClone(this.tableData)
          for (let i in _data) {
            if (_data[i]._id === row._id) {
              this.labelList[index].name = _data[i].name
            }
          }
        } else {
          this.labelList.splice(index, 1)
        }
      },
//      编辑标签
      handleEdit (index, row) {
        console.log(row)
        console.log(index)
        if (this.stopAddFlag) {
          this.addBorderFlag = true
          return
        }
        row.status = true
        this.stopAddFlag = true
      },
//      停用
      handleDisabled (index, row) {
        if (this.stopAddFlag) {
          this.addBorderFlag = true
          return
        }
        this.$store.dispatch('updateServiceQualityLabelStatus', {_id: row._id, name: row.name, operation: row.enable, enable: !row.enable}).then((resp) => {
          if (resp && resp.success) {
            this.$emit('refreshData')
            this.$message.success(resp.message)
          } else {
            this.$message.error(resp.message)
          }
        })
      }
    },
    beforeMount () {
      this.labelList = deepClone(this.tableData)
    },
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .first-level-label
    /*margin 10px 20px*/
    .lab-name
      margin-left: 10px;
    .is_stop
      color #ff9100
    .operate-btn
      color $c-main
    .is_stopBtn
      color $c-pink
    .cursor
      cursor pointer
    .padding-r-10
      padding-right 10px
    .save-button
      display: inline-block
      color $c-main
    .label-input
      width: 170px
      display:inline-block
      padding-right 10px
</style>




















